<template>
	<el-container class="chat-page">
		<el-aside width="280px" class="chat-list-box">
			<div class="chat-list-header">
				<div class="search-container">
					<el-input class="search-input" placeholder="搜索" v-model="searchText">
						<template #prefix>
							<el-icon><Search /></el-icon>
						</template>
					</el-input>
				</div>
			</div>
			<div class="chat-list-loading" v-if="loading">
				<div class="chat-loading-box loading-animation">
					<el-icon class="loading-icon"><Loading /></el-icon>
					<span class="loading-text">消息接收中<span class="loading-dots">...</span></span>
				</div>
			</div>
			<el-scrollbar class="chat-list-items">
				<div v-for="(chat,index) in chatStore.chats" :key="index" @dblclick="onWind(chat)" @contextmenu.prevent="showContextMenu($event, chat, index)">
					<chat-item v-show="!chat.delete && chat.showName && chat.showName.includes(searchText)" :chat="chat" :index="index"
						@click.native="onActiveItem(chat)" @delete="onDelItem(index)" @wind="onWind(chat)"  @top="onTop(index)"
						:active="chat === chatStore.activeChat"></chat-item>
				</div>
				<div class="empty-chat-tip" v-if="showEmptyTip">
					<el-icon><ChatDotRound /></el-icon>
					<p>暂无会话</p>
					<p class="sub-tip">开始一段新的对话吧</p>
				</div>
			</el-scrollbar>
		</el-aside>
		<el-container class="chat-box">
			<chat-box v-if="chatStore.activeChat && chatStore.activeChat.targetId && isChatShow && chatStore.chats && chatStore.chats.length > 0" 
				:chat="chatStore.activeChat" 
				:flag="true" 
				:key="chatStore.activeChat.targetId"
				v-loading="conversationLoading"
				element-loading-text="加载对话内容中..."
				element-loading-background="rgba(255, 255, 255, 0.8)">
			</chat-box>
			<div v-else-if="chatStore.activeChat && !isChatShow" class="chat-windowed-tip">
				<el-icon><Message /></el-icon>
				<p>会话已在独立窗口打开</p>
			</div>
			<div v-else class="chat-empty-tip">
				<el-icon><ChatDotRound /></el-icon>
				<p>选择一个会话开始聊天</p>
			</div>
		</el-container>
		
		<!-- 右键菜单 -->
		<el-teleport to="body">
			<transition name="context-menu-fade">
				<div class="context-menu" v-show="contextMenuVisible" :style="{ left: contextMenuX + 'px', top: contextMenuY + 'px' }">
					<div class="menu-item" @click="handleContextMenuAction('top')">
						<span>置顶</span>
					</div>
					<div class="menu-item" @click="handleContextMenuAction('delete')">
						<span>删除</span>
					</div>
					<!-- 窗口化功能暂时关闭 -->
					<!-- <div class="menu-item" @click="handleContextMenuAction('window')">
						<span>窗口化</span>
					</div> -->
				</div>
			</transition>
		</el-teleport>
	</el-container>
</template>

<script>
	import ChatItem from "../components/chat/ChatItem.vue";
	import ChatBox from "../components/chat/ChatBox.vue";
	import { Search, Message, ChatDotRound, Loading } from '@element-plus/icons-vue';
	import { ipcApiRoute } from '@/api';
	import { ipc } from '@/utils/ipcRenderer';
	import emitter from '@/utils/eventBus'; // 导入事件总线
	
	export default {
		name: "chat",
		components: {
			ChatItem,
			ChatBox,
			Search,
			Message,
			ChatDotRound,
			Loading
		},
		data() {
			return {
				searchText: "",
				messageContent: "",
				group: {},
				groupMembers: [],
				isChatShow: true,
				// 右键菜单相关数据
				contextMenuVisible: false,
				contextMenuX: 0,
				contextMenuY: 0,
				currentContextChat: null,
				currentContextIndex: -1,
				conversationLoading: false // 添加会话加载状态
			}
		},
		methods: {
			// 显示右键菜单
			showContextMenu(event, chat, index) {
				// 阻止默认右键菜单
				event.preventDefault();
				// 设置菜单位置
				this.contextMenuX = event.clientX;
				this.contextMenuY = event.clientY;
				// 保存当前操作的聊天和索引
				this.currentContextChat = chat;
				this.currentContextIndex = index;
				// 显示菜单
				this.contextMenuVisible = true;
				
				// 点击其他区域关闭菜单
				this.$nextTick(() => {
					const closeMenu = () => {
						this.contextMenuVisible = false;
						document.removeEventListener('click', closeMenu);
					};
					document.addEventListener('click', closeMenu);
				});
			},
			
			// 处理右键菜单操作
			handleContextMenuAction(action) {
				if (!this.currentContextChat) return;
				
				switch (action) {
					case 'top':
						this.onTop(this.currentContextIndex);
						break;
					case 'delete':
						this.onDelItem(this.currentContextIndex);
						break;
					case 'window':
						this.onWind(this.currentContextChat);
						break;
				}
				
				// 关闭菜单
				this.contextMenuVisible = false;
			},
			
			// 检查窗口是否已独立
			checkWindowStatus(chatId) {
				const windowedChats = JSON.parse(localStorage.getItem('windowedChats') || '[]');
				return windowedChats.includes(chatId);
			},

			// 添加独立窗口记录
			addWindowStatus(chatId) {
				const windowedChats = JSON.parse(localStorage.getItem('windowedChats') || '[]');
				if (!windowedChats.includes(chatId)) {
					windowedChats.push(chatId);
					localStorage.setItem('windowedChats', JSON.stringify(windowedChats));
				}
			},

			// 移除独立窗口记录
			removeWindowStatus(chatId) {
				const windowedChats = JSON.parse(localStorage.getItem('windowedChats') || '[]');
				const index = windowedChats.indexOf(chatId);
				if (index > -1) {
					windowedChats.splice(index, 1);
					localStorage.setItem('windowedChats', JSON.stringify(windowedChats));
				}
			},

			onActiveItem(chat) {
				// 设置加载状态
				this.conversationLoading = true;
				console.log('激活聊天会话:', chat.targetId, '类型:', chat.type);
				
				// 检查是否已经窗口化
				if (this.checkWindowStatus(chat.targetId)) {
					// 使用 nextTick 确保 DOM 更新完成
					this.$nextTick(() => {
						this.isChatShow = false;
						this.$store.commit("getactiveChat", chat.targetId);
						
						// 窗口化情况下，不需要等待加载，直接关闭加载状态
						console.log('会话已窗口化，直接关闭加载状态');
						this.conversationLoading = false;
					});
				} else {
					// 使用 nextTick 确保 DOM 更新完成
					this.$nextTick(() => {
						this.isChatShow = true;
						this.$store.commit("getactiveChat", chat.targetId);
						
						// 非群聊时直接关闭加载状态
						if (chat.type !== 'GROUP') {
							console.log('非群聊，设置延时关闭加载状态');
							setTimeout(() => {
								this.conversationLoading = false;
							}, 500);
						} else {
							// 群聊会由群成员加载完成事件触发关闭
							console.log('群聊加载，等待群成员加载完成事件，群ID:', chat.targetId);
							
							// 添加超时保护，防止无限加载
							setTimeout(() => {
								if (this.conversationLoading && 
									this.chatStore.activeChat && 
									this.chatStore.activeChat.targetId === chat.targetId) {
									console.log('群聊加载超时，强制关闭加载状态');
									this.conversationLoading = false;
								}
							}, 60000); // 30秒后自动关闭
						}
					});
				}
			},
			onDelItem(index) {
				this.$store.commit("removeChat", index);
			},
			onTop(chatIdx) {
				this.$store.commit("moveTop", chatIdx);
			},
			onWind(chat) {
				// 确保chat对象存在且targetId有值
				if (!chat || !chat.targetId) {
					console.error('聊天对象或targetId为空', chat);
					return;
				}

				// 使用 nextTick 确保 DOM 更新完成
				this.$nextTick(() => {
					try {
						// 设置当前活动聊天
						this.$store.commit("getactiveChat", chat.targetId);
						this.isChatShow = false;
						
						// 记录窗口化状态
						this.addWindowStatus(chat.targetId);

						// 确保params中包含有效的index
						const chatId = String(chat.targetId); // 确保是字符串类型
						const simpleChatData = {
							index: chatId,
							name: chat.showName || '聊天窗口'
						};
						
						// 检查是否在Electron环境中
						const isElectron = window.electron || (window.require && window.require('electron'));
						
						if (isElectron) {
							// Electron环境 - 使用框架标准方式创建窗口
							console.log('Electron环境：使用ipc创建窗口');
							
							// 使用框架标准的createWindow方法
							this.$ipc.invoke(ipcApiRoute.os.createWindow, {
								type: 'vue',
								windowName: `chat-window-${chatId}`,
								windowTitle: chat.showName || '聊天窗口',
								content: '#/home/chatbox/' + encodeURIComponent(JSON.stringify(simpleChatData))
							}).then(winId => {
								console.log('窗口创建成功，ID:', winId);
								
								// 简化数据以避免克隆错误
								const simpleChat = {
									targetId: chatId,
									showName: chat.showName,
									messages: chat.messages || [],
									timestamp: new Date().getTime()
								};
								
								// 等待窗口完全加载后发送数据
								setTimeout(() => {
									this.$ipc.invoke(ipcApiRoute.os.window1ToWindow2, {
										receiver: `chat-window-${chatId}`,
										content: {
											type: 'sync-chat-data',
											chatId: chatId,
											chatData: simpleChat
										}
									}).catch(err => {
										console.error('发送窗口同步消息失败:', err);
									});
								}, 800);
							}).catch(err => {
								console.error('窗口创建请求失败:', err);
								// 请求失败，恢复状态
								this.isChatShow = true;
								this.removeWindowStatus(chat.targetId);
							});
						} else {
							// 浏览器环境 - 使用浏览器原生窗口
							console.log('浏览器环境：使用window.open创建窗口');
							
							// 构建URL参数
							const urlParams = new URLSearchParams();
							urlParams.append('chatId', chatId);
							urlParams.append('name', chat.showName || '聊天窗口');
							
							// 获取当前URL的基础部分(协议+主机+端口)
							const baseUrl = window.location.origin;
							// 构建新窗口URL (注意：这里路径需要根据实际路由配置调整)
							const windowUrl = `${baseUrl}/#/home/chatbox?${urlParams.toString()}`;
							
							// 打开新窗口
							const newWindow = window.open(windowUrl, `chat-window-${chatId}`, 
								`width=800,height=600,resizable=yes,scrollbars=yes,status=yes`);
							
							if (newWindow) {
								// 存储窗口引用
								window.chatWindows = window.chatWindows || {};
								window.chatWindows[chatId] = newWindow;
								
								// 监听窗口关闭事件
								newWindow.addEventListener('beforeunload', () => {
									if (window.chatWindows && window.chatWindows[chatId]) {
										delete window.chatWindows[chatId];
										// 如果当前活动聊天是被关闭的窗口，更新显示状态
										if (this.chatStore.activeChat && this.chatStore.activeChat.targetId === chatId) {
											this.isChatShow = true;
											this.removeWindowStatus(chatId);
										}
									}
								});
								
								// 在新窗口加载完成后发送数据
								newWindow.addEventListener('load', () => {
									try {
										// 简化数据以避免克隆错误
										const simpleChat = {
											targetId: chatId,
											showName: chat.showName,
											messages: chat.messages || [],
											timestamp: new Date().getTime()
										};
										
										// 向新窗口发送消息
										newWindow.postMessage({
											type: 'sync-chat-data',
											chatId: chatId,
											chatData: simpleChat
										}, '*');
									} catch (error) {
										console.error('发送数据到新窗口失败:', error);
									}
								});
							} else {
								console.error('创建浏览器窗口失败，可能被浏览器阻止');
								// 创建失败，恢复状态
								this.isChatShow = true;
								this.removeWindowStatus(chat.targetId);
								// 提示用户
								this.$notify({
									title: '提示',
									message: '窗口打开失败，请检查浏览器是否阻止了弹出窗口',
									type: 'warning'
								});
							}
						}
					} catch (error) {
						console.error('创建窗口过程中出错:', error);
						this.isChatShow = true;
						this.removeWindowStatus(chat.targetId);
					}
				});
			},
			// 添加窗口关闭处理方法
			handleWindowClose() {
				// 清空本地存储中的窗口状态
				localStorage.removeItem('windowedChats');
			},
			// 清理聊天状态
			clearChatState() {
				// 清除活动聊天
				this.$store.commit("getactiveChat", null);
				// 清除本地存储的窗口状态
				localStorage.removeItem('windowedChats');
				// 重置组件状态
				this.isChatShow = true;
				this.searchText = "";
				this.messageContent = "";
				this.group = {};
				this.groupMembers = [];
			},
			// 修改或添加发送消息方法
			async sendMessage() {
				if (!this.inputMessage.trim()) {
					return;
				}
				
				try {
					const chat = this.currentChat;
					if (!chat || !chat.id) {
						console.error('发送消息失败：当前聊天不存在');
						return;
					}
					
					const message = {
						id: Date.now().toString(),
						chatId: chat.id,
						content: this.inputMessage,
						sender: 'me',
						timestamp: new Date().toISOString(),
						status: 'sent'
					};
					
					// 添加消息到本地
					this.$store.commit('chat/addMessage', {
						chatId: chat.id,
						message
					});
					
					// 清空输入框
					this.inputMessage = '';
					
					// 发送广播消息到其他窗口
					const broadcastData = {
						type: 'newMessage',
						chatId: chat.id,
						message
					};
					
					console.log('广播新消息:', broadcastData);
					const result = await this.$ipc.invoke(ipcApiRoute.os.chatBroadcastMessage, {
						data: broadcastData
					});
					
					console.log('广播消息结果:', result);
					
				} catch (error) {
					console.error('发送消息时出错:', error);
				}
			},
			// 添加处理聊天窗口消息的通用方法
			handleChatWindowMessage(content, source) {
				console.log('收到子窗口消息:', content);
				// 简化处理，避免不必要的嵌套
				try {
					if (!content) return;
					
					// 打印每次接收到的消息内容，帮助调试
					console.log('接收到内容:', JSON.stringify(content));
					
					if (content.type === 'request-chat-data' && content.chatId) {
						// 查找聊天数据
						const chatId = content.chatId;
						console.log('子窗口请求聊天数据, ID:', chatId);
						
						// 确保正确比较ID类型（可能一个是字符串一个是数字）
						const chat = this.chatStore.chats.find(c => String(c.targetId) === String(chatId));
						
						if (chat) {
							console.log('找到请求的聊天数据，准备发送:', chat.targetId);
							
							// 使用简化版数据避免克隆错误
							const simpleChatData = {
								targetId: chat.targetId,
								showName: chat.showName,
								messages: chat.messages || [],
								timestamp: new Date().getTime()
							};
							
							// 检查是否在Electron环境中
							const isElectron = window.electron || (window.require && window.require('electron'));
							
							if (isElectron) {
								// 在Electron环境中使用IPC发送
								this.$ipc.invoke(ipcApiRoute.os.window1ToWindow2, {
									receiver: content.windowId || `chat-window-${chatId}`,
									content: {
										type: 'sync-chat-data',
										chatId: String(chatId),
										chatData: simpleChatData
									}
								}).catch(err => {
									console.error('发送聊天数据到子窗口失败:', err);
								});
							} else if (source && typeof source.postMessage === 'function') {
								// 在浏览器环境中使用postMessage发送
								source.postMessage({
									type: 'sync-chat-data',
									chatId: String(chatId),
									chatData: simpleChatData
								}, '*');
							}
						} else {
							console.error('找不到请求的聊天数据:', chatId);
							
							// 创建一个最基本的聊天对象返回
							const basicChatData = {
								targetId: String(chatId),
								showName: '聊天 ' + chatId,
								messages: [
									{
										id: Date.now(),
										content: '该聊天数据未找到，显示模拟数据',
										sendTime: new Date().toISOString(),
										isMe: true
									}
								],
								timestamp: new Date().getTime()
							};
							
							// 检查是否在Electron环境中
							const isElectron = window.electron || (window.require && window.require('electron'));
							
							if (isElectron) {
								// 在Electron环境中使用IPC发送
								this.$ipc.invoke(ipcApiRoute.os.window1ToWindow2, {
									receiver: content.windowId || `chat-window-${chatId}`,
									content: {
										type: 'sync-chat-data',
										chatId: String(chatId),
										chatData: basicChatData,
										isBasicData: true
									}
								}).catch(err => {
									console.error('发送基本聊天数据失败:', err);
								});
							} else if (source && typeof source.postMessage === 'function') {
								// 在浏览器环境中使用postMessage发送
								source.postMessage({
									type: 'sync-chat-data',
									chatId: String(chatId),
									chatData: basicChatData,
									isBasicData: true
								}, '*');
							}
						}
					}
				} catch (error) {
					console.error('处理子窗口消息出错:', error);
				}
			},
			// 处理浏览器窗口消息
			handleBrowserWindowMessage(event) {
				// 验证消息来源安全性
				if (event.origin === window.location.origin) {
					const content = event.data;
					if (content && content.type === 'request-chat-data') {
						this.handleChatWindowMessage(content, event.source);
					}
				}
			},
			// 添加处理群成员加载完成事件的方法
			handleGroupMembersLoaded(data) {
				console.log('收到群成员加载完成事件:', JSON.stringify(data));
				try {
					// 检查当前活动聊天是否是该群聊 - 使用String转换确保类型一致
					if (
						this.chatStore.activeChat && 
						this.chatStore.activeChat.type === 'GROUP' && 
						String(this.chatStore.activeChat.targetId) === String(data.groupId)
					) {
						console.log('当前活动聊天是该群聊，关闭会话加载状态，活动群ID:', 
							this.chatStore.activeChat.targetId, '接收到的群ID:', data.groupId);
						this.conversationLoading = false;
					} else {
						console.log('条件不匹配:', 
							'activeChat存在:', !!this.chatStore.activeChat, 
							'类型是GROUP:', this.chatStore.activeChat?.type === 'GROUP',
							'活动群ID:', this.chatStore.activeChat?.targetId, 
							'接收到的群ID:', data.groupId);
					}
				} catch (err) {
					console.error('处理群成员加载完成事件出错:', err);
					// 出错时也关闭加载状态
					this.conversationLoading = false;
				}
			}
		},
		computed: {
			chatStore() {
				return this.$store.state.chatStore;
			},
			loading(){
				return this.chatStore.loadingGroupMsg || this.chatStore.loadingPrivateMsg
			},
			showEmptyTip() {
				if (!this.chatStore.chats || this.chatStore.chats.length === 0) {
					return true;
				}
				// 检查是否所有会话都被过滤掉了（被删除或不匹配搜索）
				return !this.chatStore.chats.some(chat => 
					!chat.delete && chat.showName && chat.showName.includes(this.searchText)
				);
			}
		},
		watch: {
			// 监听活动聊天的变化
			'chatStore.activeChat': {
				handler(newChat) {
					if (newChat) {
						// 使用 nextTick 确保 DOM 更新完成
						this.$nextTick(() => {
							this.isChatShow = !this.checkWindowStatus(newChat.targetId);
						});
					}
				},
				immediate: true
			}
		},
		created() {
			// 监听群成员加载完成事件
			emitter.on('group-members-loaded', this.handleGroupMembersLoaded);
			
			// 添加超时保护，确保加载状态不会永久显示
			this.$nextTick(() => {
				if (this.conversationLoading) {
					console.log('设置群聊加载状态超时保护');
					setTimeout(() => {
						if (this.conversationLoading && this.chatStore.activeChat?.type === 'GROUP') {
							console.log('群聊加载状态超时，自动关闭');
							this.conversationLoading = false;
						}
					}, 10000); // 10秒后自动关闭
				}
			});
			
			// 检查是否在Electron环境中
			const isElectron = window.electron || (window.require && window.require('electron'));
			
			if (isElectron) {
				// Electron环境 - 使用ipc通信
				// 监听窗口关闭事件
				ipc.on('window-closed', (event, data) => {
					if (data && data.index) {
						this.removeWindowStatus(data.index);
						// 如果当前活动窗口是被关闭的窗口，更新显示状态
						if (this.chatStore.activeChat && this.chatStore.activeChat.targetId === data.index) {
							this.isChatShow = true;
						}
					}
				});
				
				// 监听登出事件
				ipc.on('logout', () => {
					this.clearChatState();
				});
				
				// 修改子窗口请求数据的消息处理
				ipc.on('controller/os/window2ToWindow1', (event, content) => {
					this.handleChatWindowMessage(content);
				});
			} else {
				// 浏览器环境 - 使用postMessage通信
				// 添加消息事件监听器
				window.addEventListener('message', this.handleBrowserWindowMessage);
				
				// 监听页面关闭事件，清理所有打开的窗口
				window.addEventListener('beforeunload', () => {
					if (window.chatWindows) {
						// 关闭所有打开的聊天窗口
						Object.keys(window.chatWindows).forEach(chatId => {
							try {
								if (window.chatWindows[chatId]) {
									window.chatWindows[chatId].close();
								}
							} catch (error) {
								console.error('关闭窗口失败:', error);
							}
						});
					}
				});
			}

			// 添加窗口关闭事件监听
			window.addEventListener('beforeunload', this.handleWindowClose);
		},
		beforeUnmount() {
			// 移除群成员加载完成事件监听
			emitter.off('group-members-loaded', this.handleGroupMembersLoaded);
			
			// 检查是否在Electron环境中
			const isElectron = window.electron || (window.require && window.require('electron'));
			
			if (isElectron) {
				// 移除Electron事件监听
				ipc.removeAllListeners('window-closed');
				ipc.removeAllListeners('controller/os/window2ToWindow1');
				ipc.removeAllListeners('logout');
			} else {
				// 移除浏览器事件监听
				window.removeEventListener('message', this.handleBrowserWindowMessage);
			}
			
			// 移除窗口关闭事件监听
			window.removeEventListener('beforeunload', this.handleWindowClose);
		}
	}
</script>

<style lang="scss">
	.chat-page {
		.chat-list-box {
			display: flex;
			flex-direction: column;
			border-right: #53a0e79c solid 1px;	
			background: white;
			width: 280px;

			.chat-list-header {
				padding: 16px;
				border-bottom: 1px solid #ebeef5;
				background-color: #fff;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
				z-index: 10;
				position: relative;
				
				.search-container {
					display: flex;
					align-items: center;
					gap: 12px;
					
					.search-input {
						flex: 1;
						
						:deep(.el-input__wrapper) {
							border-radius: 20px;
							box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
							transition: all 0.3s ease;
							
							&:hover, &:focus {
								box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
							}
							
							.el-input__prefix-inner {
								color: #909399;
							}
						}
					}
				}
			}
			
			.chat-list-loading {
				height: 50px;
				background-color: #eee;
				
				.chat-loading-box {
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.loading-animation {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 10px;
					
					.loading-icon {
						font-size: 18px;
						color: var(--el-color-primary);
						animation: rotate 1.5s linear infinite;
					}
					
					.loading-text {
						color: var(--el-text-color-secondary);
						font-size: 14px;
					}
					
					.loading-dots {
						display: inline-block;
						overflow: hidden;
						animation: dots-animation 1.5s infinite steps(4, end);
						width: 1.2em;
						vertical-align: bottom;
					}
				}
				
				@keyframes rotate {
					0% { transform: rotate(0deg); }
					100% { transform: rotate(360deg); }
				}
				
				@keyframes dots-animation {
					0% { width: 0; }
					100% { width: 1.2em; }
				}
			}
			
			.chat-list-items {
				flex: 1;
				background: #F8F8F8;
				margin: 0 3px;
				
				.empty-chat-tip {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 100%;
					color: #909399;
					padding: 30px 0;
					
					i {
						font-size: 56px;
						margin-bottom: 16px;
						color: var(--el-color-primary-light-3, #79bbff);
					}
					
					p {
						font-size: 16px;
						margin: 0;
						
						&.sub-tip {
							font-size: 14px;
							color: #c0c4cc;
							margin-top: 8px;
						}
					}
				}
			}
		}
		.chat-box {
			.chat-windowed-tip,
			.chat-empty-tip {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 100%;
				color: #909399;
				
				i {
					font-size: 48px;
					margin-bottom: 16px;
				}
				
				p {
					font-size: 16px;
					margin: 0;
				}
			}
			
			.chat-empty-tip {
				background: #F8F8F8;
				i {
					color: var(--el-color-primary-light-3, #79bbff);
				}
			}
		}
	}
	
	/* 右键菜单样式 */
	.context-menu {
		position: fixed;
		background: white;
		border: 1px solid #ebeef5;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		z-index: 9999;
		transform-origin: top left;
		overflow: hidden;
		
		.menu-item {
			padding: 8px 16px;
			cursor: pointer;
			font-size: 14px;
			transition: background-color 0.2s ease, box-shadow 0.2s ease;
			position: relative;
			
			&:hover {
				background-color: var(--el-color-primary-light-9, #ecf5ff);
				box-shadow: 0 0 10px var(--el-color-primary-light-8, #d9ecff) inset;
			}
			
			&:active {
				background-color: var(--el-color-primary-light-8, #d9ecff);
			}
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 8px;
				right: 8px;
				height: 1px;
				background-color: var(--el-border-color-lighter, #ebeef5);
			}
			
			&:last-child::after {
				display: none;
			}
		}
	}

	/* 添加菜单动画效果 */
	.context-menu-fade-enter-active,
	.context-menu-fade-leave-active {
		transition: opacity 0.25s, transform 0.25s;
	}

	.context-menu-fade-enter-from,
	.context-menu-fade-leave-to {
		opacity: 0;
		transform: translateY(-10px);
	}
</style>